<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="material-store-dialog">
                <div class="material-store-dialog__mask"></div>

                <div class="material-store-dialog__content">
                    <div class="top">
                        <div class="top-bg">
                            <div class="title">新人大礼包</div>
                            <div class="obtain-requirements">
                                注册即可获得价值888元的优惠券
                            </div>
                        </div>

                        <div class="coupon-list">
                            <div class="coupon-item">
                                <div class="coupon-left">
                                    <span class="unit">￥</span>7
                                </div>
                                <div class="coupon-right">无门槛优惠券</div>
                            </div>
                            <div class="coupon-item">
                                <div class="coupon-left">
                                    <span class="unit">￥</span>15
                                </div>
                                <div class="coupon-right">全素材-满150可用</div>
                            </div>
                            <div class="coupon-item">
                                <div class="coupon-left">
                                    <span class="unit">￥</span>25
                                </div>
                                <div class="coupon-right">全素材-满150可用</div>
                            </div>
                        </div>

                        <div class="tips">可在“个人中心-交易中心”查看</div>
                    </div>
                    <div class="bottom">
                        <img
                            class="coupon-btn"
                            :src="`${_oss_}images/material-store/coupon-btn.png`"
                        />
                    </div>

                    <img
                        class="icon-close"
                        :src="`${_oss_}images/material-store/coupon-icon-close.png`"
                    />
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup></script>
<style lang="scss" scoped>
.material-store-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .icon-close {
            width: 34px;
            height: 34px;
            position: absolute;
            left: 50%;
            bottom: -34px;
            transform: translateX(-50%);
            cursor: pointer;
        }

        .top {
            width: 350px;
            height: 447px;
            padding-top: 18px;
            background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/material-store/coupon-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            &-bg {
                width: 341px;
                height: 85px;
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/material-store/coupon-top-bg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-left: 4px;
                padding-top: 19px;

                .title {
                    text-align: center;
                    font-weight: 800;
                    font-size: 24px;
                    line-height: 1em;
                    color: #ff430e;
                }

                .obtain-requirements {
                    font-size: 14px;
                    color: #000;
                    text-align: center;
                    margin-top: 11px;
                    line-height: 1em;
                }
            }

            .coupon-list {
                margin-top: 11px;

                .coupon-item {
                    display: flex;
                    align-items: center;
                    width: 327px;
                    height: 90px;
                    background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/material-store/coupon-item-bg.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    margin-bottom: 9px;
                    margin-left: 10px;

                    .coupon-left {
                        width: 100px;
                        text-align: right;
                        font-weight: 800;
                        font-size: 48px;
                        color: #f77132;
                        // background: linear-gradient(
                        //     0deg,
                        //     rgba(37, 37, 37, 0.61) 0%,
                        //     rgba(255, 255, 255, 0.61) 100%
                        // );
                        // -webkit-background-clip: text;
                        // -webkit-text-fill-color: transparent;

                        .unit {
                            font-size: 24px;
                        }
                    }

                    .coupon-right {
                        padding-left: 29px;
                        font-weight: 400;
                        font-size: 18px;
                    }
                }
            }

            .tips {
                margin-top: 8px;
                text-align: center;
                font-size: 16px;
                color: #fff;
                line-height: 1em;
            }
        }

        .bottom {
            margin-left: -12px;
            margin-top: 13px;

            .coupon-btn {
                width: 373px;
                cursor: pointer;
            }
        }
    }
}
</style>
